<template>
  <div style="padding: 0; margin: 0;">

    <!-- 筛选查询 -->
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px;">筛选查询</span>
    </div>


    <div style="height:40px;background-color: #ffffff;line-height:40px;">
      <el-row>
        <el-col :span="6" style="margin-left: 20px;">
          客户搜索：<el-input placeholder="请输入你要查找的客户" clearable v-model="filters.name" style="width: 200px;"></el-input>
        </el-col>
        <el-col :span="6"><el-button @click="init()">查询</el-button>
        </el-col>
      </el-row>
    </div>


    <div>
      <div
        style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
        <span style="font-size: 12px;margin-left: 20px">数据列表</span>

        <el-button size="small"
          style="background-color: #FFFFFF;float: right;margin-left: 20px;margin-right: 20px;"
          @click="router.push({ path: '/client/add' })">添加用户</el-button>
        <el-button size="small" style="background-color: #FFFFFF;float: right" @click="remove">批量删除</el-button>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" stripe border @selection-change="removeId">
      <el-table-column type="selection" width="80" header-algin="center" align="center" />
      <el-table-column prop="name" label="客户名称" width="120" header-algin="center" align="center" />
      <el-table-column prop="caname" label="联系人" width="100" header-algin="center" align="center" />
      <el-table-column prop="mobile" label="手机" width="120" header-algin="center" align="center" />
      <el-table-column prop="createTime" label="注册时间" width="180" header-algin="center" align="center" />
      <el-table-column prop="updateTime" label="最后登录时间" width="180" header-algin="center" align="center" />
      <el-table-column label="操作" header-algin="center" align="center">
        <template v-slot={row}>
          <span class="sp" @click="edit(row.id)">编辑</span>
          <span class="sp">订单</span>
          <span class="sp">明细</span>
          <span class="sp" @click="del(row)">删除</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
      :page-sizes="[2, 10, 20, 30, 40, 50]" layout="total,sizes,prev,pager,next,jumper" :total="total"
      style="float:right;margin-top:20px;margin:20px" />

  </div>

</template>
<script setup>
import {ref,onMounted} from "vue";
import {queryClient,deleteClient} from "@/api/client/Client.js"
import { ElMessageBox, ElMessage } from "element-plus";
import { useRouter } from 'vue-router'
const tableData=ref([]);

//新增路由跳转
const router = useRouter();
//筛选条件
const filters=ref({
  name:""
})
//分页信息
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页记录数
const total = ref(0);//总记录数
//当页数发生变化
function chgpg(pg) {
  page.value = pg;//更新当前第几页
  init();
}

//每页记录数
function chg(pgsize) {
  pageSize.value = pgsize;
  page.value = 1;
  init();
}
//方法

//表格数据
 async function init(){
  let data={
    page:page.value,
    pageSize:pageSize.value,
    name:filters.value.name
  }
  let res=await queryClient(data)
  if(res.code==200){
    tableData.value = res.data.list;//结果
        //更新分页信息
         page.value = res.data.page;
         pageSize.value = res.data.pageSize;
         total.value = res.data.total;
  }
}
//单个删除
async function del(row){
  ElMessageBox.confirm(
    '您确定要删除该客户记录吗？',
    '系统提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async()=>{
    let res=await deleteClient(row.id)
  if(res.code==200){
    ElMessage({
        type:'success',
        message:'删除成功',
      })
      init();
  }
  }).catch(()=>{

  })

}
//批量删除
let rmData=[];

function removeId(ids){
  let data=[];
  for(let i=0;i<ids.length;i++){
    data.push(ids[i].id)
  }
  rmData=data
}
function remove(){
  ElMessageBox.confirm(
    '您确定要删除该客户吗？',
    '系统提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async()=>{
    if(rmData.length==0){
      ElMessage({
        type:'warning',
        message:'请选择要删除的客户',
      })
      return
    }
    let res =await deleteClient(rmData)
    if(res.code==200){
      ElMessage({
        type:'success',
        message:'删除成功',
      })
      init()
    }
  }).catch(()=>{

})
}

function edit(id){
  router.push("/client/update/"+id)
}
 onMounted(()=>{
  init();
 });
</script>
<style>
.body {
  background-color: #F9F9F9;
}

.but {
float: right;
margin-top: 4px;
margin-right: 10px;
}
.spa {
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
}
.sp{
  padding: 10px;
  color: blue;
  cursor:pointer;
}
.sp:nth-child(4){
  color: black;
}
</style>
